$(() => {
    const layer = layui.layer;

    // 1.获取裁剪区域的DOM
    const $image = $("#image");
    // 2.配置选项
    const options = {
        // 纵横比
        aspectRatio: 1,
        // 指定预览区域
        preview: '.img-preview'
    }

    // 3.创建裁剪区域
    $image.cropper(options);


    // 上传:1.选择图片
    $("#btnChooseImage").click(() => {
        $("#file").click();
    });

    // 更换裁剪的图片
    $("#file").change((e) => {
        // 获取用户选择的文件
        const fileList = e.target.files;
        if (fileList.length > 0) {
            // 创建文件对应url地址
            const newImgURL = URL.createObjectURL(fileList[0]);
            $image
                .cropper('destroy')       //销毁就得裁剪区域
                .attr('src', newImgURL)   //重新设置图片路径
                .cropper(options)         //重新初始化裁剪区
        }
    });

    // 确定上传图片
    $("#btnUpload").click((e) => {
        // 1.拿到用户裁剪之后的图像
        const dataURL = $image
            .cropper('getCroppedCanvas', {   //创建canvas画布
                width: 100,
                height: 100
            })
            .toDataURL('image/png'); //将canvas上的内容,转化为base64格式的字符
        // 2.调用接口,上传头像至服务器
        $.ajax({
            url: '/my/update/avatar',
            method: 'POST',
            data: { avatar: dataURL },
            success: function (res) {
                if (res.status !== 0) {
                    return layer.msg(res.message);
                }
                layer.msg(res.message);
                // 调用父页面的更新用户信息函数
                window.parent.getUserInfo();
            }
        });
    });
});